<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!--使用ie最新渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--国产浏览器使用高速模式渲染页面，而不兼容模式-->
<meta name="renderer" content="webkit">

<title>Simple Web Based On Bootstrap</title>

<%@include file="include/_header.jsp"%>
</head>
<body>
	<%@include file="include/_topbar.jsp"%>
	<!--main content -->
	<div class="main-content">
		<div class="sidebar">
			<%@include file="include/_leftmenu.jsp"%>
		</div>
		<div class="workspace">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<i class="icon-edit icon-large"></i> 编辑账目明细
				</div>
				<div class="panel-body">
					<!-- panel body begin -->
					<form id="detailForm" class="form-horizontal" method="post" action="mybook?action=update">
						<input type="hidden" name="id" value="${Detail.id}">
						<div class="form-group">
							<label class="col-xs-2 control-label">收/支</label> <label
								class="checkbox-inline col-xs-4"> <input type="radio"
								value="收" name="type" ${Detail.type=="收"?"checked":""}> 收 
								<input type="radio" ${Detail.type=="支"?"checked":""}
								value="支" name="type"> 支
							</label> <label class="col-xs-2 control-label">项目</label>
							<div class="col-xs-4">
								<select id="catogeryCmb" name="catogeryId" class="form-control">
									
								</select>
							</div>
							
						</div>
						<div class="form-group ">
							<label class="col-xs-2 control-label">账目日期</label>
							<div class="col-xs-4" style="z-index: 2000">
								<div class="input-group date " data-provide="datepicker"
									data-date-autoclose="true" data-date-format="yyyy-mm-dd"
									data-date-language="zh-CN">
									<input type="text" class="form-control" name="recordDate" value="${Detail.recordDate}"> <span
										class="input-group-addon"><i class="icon-calendar"></i></span>
								</div>
							</div>
							<label class="col-xs-2 control-label">金额</label>

							<div class="col-xs-4">
								<input type="text" name="amount" class="form-control" placeholder="金额" value="${Detail.amount}">
							</div>
						</div>
						<div class="form-group ">
								<label class="col-xs-2 control-label">备注</label>

								<div class="col-xs-10">
									<textarea name="remark" rows="5" style="width:100%">${Detail.remark}</textarea>
								</div>
						</div>
					<div class="form-group">
                        <div class="col-xs-2 col-xs-offset-4">
                            <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> 提交</button>
                        </div>
                        <div class="col-xs-2">
                            <button type="reset" class="btn btn-warning"><i class="icon-remove"></i>重设</button>
                        </div>
                    </div>
					</form>
					<!-- panel body end -->
				</div>
			</div>

		</div>

	</div>
	<!--end main content -->
	<%@include file="include/_footer.jsp"%>


	<script>
		function createCategoryCombox(cmbSelector,type,defaultCtg){
			$.getJSON("comm?json=catogery",{type:type},function(rs){
				//console.log(rs);
				var $cmb=$(cmbSelector);
				$cmb.empty();
				var optHtml="";
				$(rs).each(function(index){
					optHtml+='<option value="'+this.id+'" '+(this.id==defaultCtg?' selected':'')+'>'+this.name+'</option>';
				}); //end of each
				$cmb.html(optHtml);
			}); // end of getJSON
		}
		
		$(document).ready(function() {
			/*----begin----------*/
			//console.log($('#detailForm').find('input[name="type"]'));
			$('#detailForm').find('input[name="type"]').click(function(e){
				//alert(this.value);
				//alert($(this).attr("value"));
				createCategoryCombox("#detailForm #catogeryCmb",this.value);
			});
			//load catogery init data
			createCategoryCombox("#detailForm #catogeryCmb","${Detail.type}","${Detail.catogeryId}");
			/*----end----------*/
		});
	</script>
</body>
</html>